<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <h3>冒泡事件stop</h3>
    <div id="app">
        <div id="div1" @click="divHandlerClick">
            <input type="button" value="单击" v-on:click="btnHandlerClick"><br>
            <h3>默认，但子组件发生之后，父组件也会发生相对应的事件</h3>
        </div>
        <div id="div1" @click="divHandlerClick" style="background-color: bisque;">
            <input type="button" value="单击" v-on:click.stop="btnHandlerClick">
            <blockquote>
                vue中stop修饰符
                stop中子组件的时间不会影响到父组件
                input type="button" value="单击" v-on:click.stop="btnHandlerClick"
            </blockquote>
        </div>
        <div id="div1" @click="divHandlerClick" style="background-color: blanchedalmond;">
            <input type="button" value="单击" v-on:click="btnHandlerClick($event)">
            <blockquote>js原生
                input type="button" value="单击" v-on:click="btnHandlerClick($event)"
                function btnHandlerClick(e) {
                alert('我是button事件')
                e.stopPropagation();
                }
            </blockquote>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {},
         methods: {
            divHandlerClick: function () {
                alert('这是div点击事件')
            },
            btnHandlerClick: function () {
                alert('这是button点击事件')
            },
            btnHandlerClick: function (e) {
                alert('我是button事件')
                e.stopPropagation();
            }
        },
    })
</script>

</html>